<template>
  <div class="clear">
    <el-button type="primary" @click="clearScreen">清屏</el-button>
  </div>

  <div class="home">
    <div v-for="(item, index) in chatArr" :key="index">
      <div class="reply" v-if="item.status === '0'">
        <div class="avatar"><img width="25" src="@/assets/logo.png" alt=""></div>
        <div class="left"></div>
        <div class="content" >{{ item.content }}
          <div class="additional flex p-2 m-2 border-solid border border-indigo-600 hover:text-violet-600" v-if="item.docVisible">
          <span class="doc-title ml-4 underline underline-offset-4">维表文档.doc</span>
            <SvgIcon name="svg-github"  class="svg-icon"  size="small" />
        </div>
        </div>

      </div>

      <div class="question" v-if="item.status === '1'">
        <div class="content">{{ item.content }}</div>
        <div class="left"></div>
        <div class="avatar"><img width="25" src="@/assets/logo.png" alt=""></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { watch, ref, reactive } from 'vue';
// import { ChatAPI } from '@/api/index';
import { ChatAPI } from '@/api/index';
const props = defineProps({
  sendMessage: String,
  data: Number
})


watch(() => props.data, (newval, oldval) => {
  addArr('1', props.sendMessage);
  replayFnc()
})
let chatArr = reactive([
  {
    status: '0', // 0-回复，1-问题
    content: '您好，我是你的机器助手，有什么可以帮助到您的吗？',
    docVisible: false
  }, {
    status: '1',
    content: '我要开始提问啦！',
    docVisible: false
  }, {
    status: '0',
    content: '请问您想要问什么呢？',
    docVisible: true
  }
]);
/** 判断问题，产生回复的方法 */
const replayFnc = async () => {
  let hasQuestion = false
  console.log(props.sendMessage);
  let postData: ChatAPI.ChatData = {
    prompt: props.sendMessage!,
    history: []
  }
  let res = await ChatAPI.chatToModel(postData)
  console.log(res);
  let replayMessage = res.data.response
  hasQuestion = true
  addArr('0', replayMessage)
  // ChatAPI.chatToModel(postData).then(res=>{
  //   console.log(res);
  // })
}

/** 添加进数组的方法 */
const addArr = (status, content) => {
  let obj = {
    status: status,
    content: content
  }
  chatArr.push(obj)
}
/** 清屏 */
const clearScreen = () => {
  chatArr.length = 0
  console.log(chatArr);
}
</script>


<style lang="less" scoped>
.clear {
  width: 800px;
  margin-bottom: 10px;
  display: flex;
  justify-content: right;
}

.home {
  height: 70vh;
  position: relative;
  width: 100%;
  overflow: auto; // 滚动条
}

// 回复的样式
.reply {
  display: flex;
  margin-top: 5px;

  .content {
    padding: 15px;
    max-width: 500px;
    border: 1px solid;
    color: #676490;
  }

  .additional {
    width: auto;
    // &::hover{
    //   fill: rgb(58, 58, 207);
    // }
    &:hover {
      .svg-icon{
        fill:#5d4b8b
      }
    }
  }

  .left {
    width: 0px;
    height: 0px;
    border: 15px solid transparent;
    border-right-color: rgba(222, 222, 244);
  }
}

// 提问的样式
.question {
  display: flex;
  margin-top: 5px;
  margin-right: 10px;
  // background: greenyellow;
  justify-content: right;

  .content {
    padding: 15px;
    max-width: 500px;
    border: 1px solid;
    color: #676490;
  }

  .left {
    width: 0px;
    height: 0px;
    border: 15px solid transparent;
    border-left-color: rgba(222, 222, 244);
  }
}
</style>
